<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';

const { locale } = useI18n();
const currentLocale = ref(locale.value);

const languages = [
  { code: 'zh-CN', name: '中文' },
  { code: 'en-US', name: 'English' }
];

function changeLanguage(lang: string) {
  currentLocale.value = lang;
  locale.value = lang;
  localStorage.setItem('locale', lang);
}
</script>

<template>
  <div class="language-switcher">
    <select 
      v-model="currentLocale" 
      @change="changeLanguage(currentLocale)"
      class="language-select"
    >
      <option 
        v-for="lang in languages" 
        :key="lang.code" 
        :value="lang.code"
      >
        {{ lang.name }}
      </option>
    </select>
  </div>
</template>

<style scoped>
.language-switcher {
  position: relative;
}

.language-select {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background-color: white;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}

.language-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
</style>